<template>
  <div class="hello">
    <p>age: {{ age }} <button type="button" @click="modifyAge">age+1</button></p>
    <p>coutn: {{ count }}</p>
  </div>
</template>

<script>
// import { defineEmits, defineProps } from 'vue'
export default {
  name: 'HelloWorld',
  // props: {
  //   age: Number
  // },
  methods: {
    // modifyAge() {
    //   this.$emit('addAge')
    // }
  },
  setup() {
    // setup(props, context){}在2.x 版本，直接注入props, context对象，
    // console.log(props)  // 2.7里面使用,可以拿到props对象的。
    // console.log(context)  //{ attrs:透传 Attributes（非响应式的对象，等价于 $attrs）, slots:插槽（非响应式的对象，等价于 $slots）, emit:触发事件（函数，等价于 $emit）, expose: 露公共属性（函数） }
    // 3.2 setup使用props, $emit()
    // const props = defineProps({
    //   count: Number,
    //   age: Number
    // })
    // console.log(props)
    // const emit = defineEmits(['addAge', 'addCount'])
    // const addAge = () => {
    //   emit('addAge')
    // }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
